<template>
  <div>
    <img
      v-if="config.backgroundImg"
      :src="
        `${apiUrl}system/annexesfile/${config.backgroundImg}?token=${token}`
      "
      draggable="false"
      :style="styleName"
    />
    <div
      v-else
      :style="{
        height: config.height + 'pt',
        'line-height': config.height + 'pt',
        width: config.width + 'pt',
        'text-align': 'center',
        'font-size': '24pt',
        overflow: 'hidden',
        backgroundColor:
          config.isBackgroundColor == '1' && config.backgroundColor
            ? config.backgroundColor
            : 'rgba(0,0,0,0)',
        opacity: config.opacity / 100,
        border:
          config.borderSize <= 0
            ? ''
            : `${config.borderSize}pt ${config.borderLine} ${config.borderColor}`,
        borderRadius: `${config.bordeRadius}pt`,
      }"
    >
      <i class="learun-icon-pic"></i>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    config: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    styleName() {
      const res = {
        width: `${this.config.width}pt`,
        height: `${this.config.height}pt`,

        backgroundColor:
          this.config.isBackgroundColor == "1" && this.config.backgroundColor
            ? this.config.backgroundColor
            : "rgba(0,0,0,0)",
        opacity: this.config.opacity / 100,

        border:
          this.config.borderSize <= 0
            ? ""
            : `${this.config.borderSize}pt ${this.config.borderLine} ${this.config.borderColor}`,
        borderRadius: `${this.config.bordeRadius}pt`,
      };

      return res;
    },
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>
